<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-08 15:48:46
 * @LastEditTime : 2023-06-29 17:22:17
-->
<i18n lang="yaml">
zh-cn:
  cache: 是否缓存
  nocache: 不缓存
  add: 新增菜单
  addBtn: 新增按钮
  edit: 修改菜单
  editBtn: 修改按钮
  addChild: 新增子菜单
  addChildBtn: 新增子按钮
  componentInfo: 请填写MainApp/views或MicroApp/views下的目录地址
  pathInfo: 仅一级菜单路径需要以'/'开始，子菜单请勿以'/'开始

  placeholder:
    name: 请输入菜单名称
    btnName: 请输入按钮名称
    euName: 请输入英文名称
    link: 请输入链接地址
    route: 请输入路由地址
    jumpType: 请选择菜单跳转类型
    menuViewType: 请选择菜单可视类型
    icon: 请选择菜单图标
    remark: 请输入菜单描述
    remarkBtn: 请输入按钮描述
    menuType: 类型
    badge: 请输入徽标内容
    component: 请输入组件路径
    iframe: 请输入链接地址
    linkErr: 链接地址格式错误,例 http://xxxxxx.com
  form:
    parent: 父级菜单
    framework: 路由类型
    name: 菜单名称
    btnName: 按钮名称
    euName: 英文名称
    component: 组件路径
    keepAlive: 开启缓存
    noCache: 清除缓存
    visible: 是否显示
    jumpType: 跳转类型
    menuType: 类型
    menuViewType: 可视类型
    remark: 菜单描述
    remarkBtn: 按钮描述
    icon: 图标
    activeIcon: 激活图标
    activeMenu: 高亮地址
    sidebar: 侧边栏显示
    breadcrumb: 面包屑显示
    defaultOpened: 次导航默认展开
    permanent: 常驻标签页
    badge: 徽标内容
    badgeType: 徽标类型
    copyright: 显示底部版权
    logo: 应用LOGO
    link: 外部链接
    route: 路由地址
    iframe: 内嵌链接
en:
  cache: Cache menu
  nocache: No cache
  add: Add Menu
  addBtn: Add button
  edit: Edit Menu
  editBtn: Edit button
  addChild: Add child menu
  addChildBtn: Add child button
  componentInfo: Please fill in the directory address under MainApp/views or MicroApp/views
  pathInfo: Only the first-level menu path needs to start with '/', do not start with '/' for submenus
  placeholder:
    name: Please enter a menu name
    btnName: Please enter a button name
    euName: Please enter the English name
    link: Please enter a link address
    route: Please enter a route address
    jumpType: Please select a menu jump type
    menuViewType: Please select menu visual type
    icon: Please select a menu icon
    remark: Please enter a menu description
    menuType: type
    badge: Please enter badge content
    component: Please enter component path
    remarkBtn: Please enter a button description
    iframe: Please enter a link address
    linkErr: The link address is in the wrong format, for example http://xxxxxx.com
  form:
    parent: Parent menu
    framework: Route type
    name: Menu name
    btnName: Button name
    euName: English name
    component: File address
    keepAlive: cache
    noCache: No cache
    visible: visible
    jumpType: Jump type
    menuType: type
    menuViewType: View Type
    remark: remark
    icon: icon
    activeIcon: Active icon
    activeMenu: Active menu
    sidebar: show in sidebar
    breadcrumb: show in breadcrumb
    defaultOpened: Default opened
    permanent: show in permanent
    badge: badge
    badgeType: Badge type
    copyright: Show copyright
    logo: logo
    link: External link
    route: Menu path
    iframe: Inline link
</i18n>

<script lang="ts" setup name="MenuModal">
import type { PropType } from 'vue'
import useRouteStore from '@g/store/modules/route'
import MenuForm from './MenuForm.vue'
import menuApi from '@/MainApp/apis/menu'
import { MenuBtnEnum } from '@/global/enums/menu'
const props = defineProps({
  editData: {
    type: Object as PropType<any>,
    default: () => null
  },
  isChild: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits<{
  (e: 'updateData'): void
}>()
const visible = defineModel({
  type: Boolean,
  default: false
})

const { t } = useConfig()
const routeStore = useRouteStore()

const loading = ref(false)
const menuRef = ref()
const isMenu = computed(() => menuRef.value?.menuForm.menuType === MenuBtnEnum.MENU)

const handClosed = () => {
  menuRef.value?.menuFormRef?.resetFields()
  visible.value = false
}

const { msgError } = useMessage()
// 新增、修改
const handConfirm = () => {
  if (menuRef.value?.menuForm) {
    menuRef.value.menuForm = {
      ...menuRef.value?.menuForm,
      name: isMenu.value ? menuRef.value?.menuForm?.name : menuRef.value?.menuForm?.btnName,
      icon: isMenu.value ? menuRef.value?.menuForm?.icon : menuRef.value?.menuForm?.btnIcon,
      btnName: isMenu.value ? menuRef.value?.menuForm?.name : menuRef.value?.menuForm?.btnName,
      btnIcon: isMenu.value ? menuRef.value?.menuForm?.icon : menuRef.value?.menuForm?.btnIcon
    }
  }
  menuRef.value?.menuFormRef
    && menuRef.value?.menuFormRef.validate(async (valid: boolean) => {
      if (valid) {
        loading.value = true
        const params = {
          ...menuRef.value?.menuForm,
          name: isMenu ? menuRef.value?.menuForm?.name : menuRef.value?.menuForm?.btnName,
          icon: isMenu ? menuRef.value?.menuForm?.icon : menuRef.value?.menuForm?.btnIcon
        }
        delete params.btnName
        delete params.btnIcon
        const { success, msg }
          = (props.editData && !props.isChild)
            ? await menuApi.updateMenu({
              ...params
            })
            : await menuApi.addNewMenu({
              ...params,
              parentId: menuRef.value?.menuForm?.parentId || null
            })
        if (success) {
          emits('updateData')
          handClosed()
          // 菜单更改成功，重新渲染
          routeStore.generateRoutesAtBack()
        }
        else {
          msgError(msg)
        }
        loading.value = false
      }
    })
}
</script>

<template>
  <el-dialog
    v-model="visible"
    destroy-on-close
    align-center
    :title="isChild ? isMenu ? t('addChild')
      : t('addChildBtn')
      : editData ? isMenu ? t('edit')
        : t('editBtn') : isMenu
          ? t('add') : t('addBtn')
    "
    :width="780"
    draggable
    :close-on-click-modal="false"
    @closed="handClosed"
    @close="visible = false"
  >
    <MenuForm
      ref="menuRef"
      :visible="visible"
      :is-child="isChild"
      :edit-data="editData"
      label-width="100px"
    />
    <template #footer>
      <el-button
        bg
        text
        @click="handClosed"
      >
        {{ t('action.cancel') }}
      </el-button>
      <el-button
        type="primary"
        bg
        :loading="loading"
        @click="handConfirm"
      >
        {{ t('action.sure') }}
      </el-button>
    </template>
  </el-dialog>
</template>
